import React, { Component } from 'react';
import '../../styles/AllGoods.scss'
import * as service from '../../api/index'
import { SearchBar } from 'antd-mobile';

class AllGoods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { name: '综合' },
                { name: '销量' },
                { name: '新品' },
                { name: '价格' },
                { name: '筛选' },
            ],
            goodlist: []
        }
    }

    componentDidMount() {
        // console.log(this.props.location.state.id);
        service.good_list({ id: this.props.location.state.id }).then((res) => {
            // console.log(this.props.location.state.id);
            console.log(res.data.list);
            this.setState({
                goodlist: res.data.list
            })
        })
        // service.keySearch({ brand: this.props.location.state.searchkey }).then((res) => {
        //     this.setState({
        //         goodlist: res.data.list
        //     })
        // })
    }

    handleClick(index, e) {
        this.setState({
            currentIndex: index
        }, () => {
            console.log(this.state.currentIndex);
        })
    }

    toDetail(id) {
        this.props.history.push('/detail/' + id)
    }

    render() {
        // console.log(this.props.location.state);
        return (
            <div className='allgoods'>
                <div className="header">
                    {/* 所有商品顶部标题和搜索框 */}
                    <div className="allgoods-top">
                        <div className='title'>全部商品</div>
                        <SearchBar className='search' placeholder='请输入内容' />
                    </div>

                    {/* 全部商品筛选和商品列表 */}
                    <div className="screen-list">
                        {/* 筛选 */}
                        {/* <div className="screen"></div> */}
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <div className={`img1-a ${this.state.currentIndex === index ? 'active' : ''}`} onClick={(e) => {
                                        this.handleClick(index, e);
                                    }} key={index}>{item.name}</div>
                                )
                            })
                        }
                    </div>
                </div>

                {/* 商品列表 */}
                <div className="goodlist">
                    {
                        this.state.goodlist &&
                        this.state.goodlist.map((item, index) => {
                            return (
                                <div className="good" key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                    <div className="old_price">原价 ¥{item.salesPrice.value}</div>
                                    <div className="price">活动价 ¥{item.salesPrice.value}</div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        );
    }
}

export default AllGoods;